<!--支部空间评论-->
<template> 
  <section class="foot-action">
    <div class="inner">
      <div class="avatar">
        <img
          v-if="userInfo.id"
          :src="tools.getAvatarUrl(userInfo.id)+'&'+Date.now()"
          alt=""
        />
        <img
          v-else=""
          src="../../../static/images/user_bg.jpg"
          alt=""
        />
      </div>
      <div class="input-wrap" >
        <textarea :class="textareaClass" v-on:focus="onfocus()" v-on:blur="onblur()" placeholder="添加评论..." v-model="content" ></textarea>
        <span @click="save" v-if="content.length > 0 && content.trim().length != 0" class="text-btn"><span>提交</span></span>
      </div>
      <!--<div class="input-wrap1" v-if="!isComment">
      </div>-->
    </div>
<!--    <div class="inner">
      <div class="icons-btn-wrap">
        <i @click="up" class="icon icon-like" :class="{'icon-liked': selfSupport}"></i><span class="hasUp-my">{{supportTotal}}</span>
        <i @click="goCommentList" class="icon icon-comment"></i><span class="hasUp-my">{{commentTotal}}</span>
        &lt;!&ndash;        <i v-if="isShowCollect" @click="addCollection" class="icon icon-collection" :class="{'icon-collectioned': hasCollection}"></i>&ndash;&gt;
        &lt;!&ndash; <i @click="showShareDialog" class="icon icon-share"></i> &ndash;&gt;
        &lt;!&ndash;        <i @click="showShareTo" class="icon icon-share"></i>&ndash;&gt;
      </div>
    </div>-->
  </section>
</template>

<script>
  import Textarea from 'cube-ui'
  import tools from "@/utils/tools";
  export default {
    name: 'branchFooterComponent',
    props: [
      'commentTotal',//评论总数
      'supportTotal',//点赞总数
      'contentId',///心得id
      'selfSupport',//是否点赞
      'upsCount',
      'comments',
      'detail',
      'shareType', // 分享类型
      'commentList' // true:已经有评论列表,因此不跳转评论列表
    ],
    components: {Textarea},
    data () {
      return {
        content: '',
        textareaClass: '',
        data: {
          ups: 0,
          comments: 0
        },
        hasCollection: false,
        isShowCollect: true,
        hasUp: false,
        userInfo:''
      }
    },
    created () {
      this.userInfo = this.$store.state.userInfo;
    },
    methods: {
      goCommentList () {
        if (this.commentList === true) {
          this.$emit('onComment')
          return false
        }
        this.$store.state.newsDetail = this.detail
        this.$router.push({name: 'commentList', query: {id: this.detail.id}})
      },
      /*评论提交*/
      save () {
        if (this.content.length == 0 || this.content.trim().length == 0) {
          return this.tools.alert('请填写留言')
        }
        let params = {
          "comment": this.content,
          "commentId": "",
          "optFlag": "2",
          "replyToUser": "",
          "xdId": this.contentId
        }
        // this.tools.showLoading()
        this.fetchService.topic_subComment(params).then(res => {
          // this.tools.hideLoading()
          if (res.code === 0) {
            this.content = ''
            this.data.comments ++
            // this.tools.tip('评论成功', 2000)
            this.$emit('loadData')
            return
          }
          return this.tools.tip(res.message || '网络异常，请稍后重试', 2000)
        })
      },
      /*点赞*/
      up () {
        if(this.selfSupport){
          let data = {
            "comment": "",
            "commentId": "",
            "optFlag": "1",
            "replyToUser": "",
            "xdId": this.contentId
          }
          return this.fetchService.topic_cancelSupport(data).then(res => {
            if (res.code !== 0) {
              // return this.tools.tip(res.message , 2000)
              return
            }
            this.supportTotal --
            this.selfSupport = false
            return res
          })
        }else{
          let params =
            {
              "comment": "",
              "commentId": "",
              "optFlag": "1",
              "replyToUser": "",
              "xdId":  this.contentId
            }
          return this.fetchService.topic_subSupport(params).then(res => {
            if (res.code !== 0) {
              // return this.tools.tip(res.message || '接口服务出错，请联系管理员', 2000)
              return
            }
            this.supportTotal ++
            this.selfSupport = true
            // this.tools.tip('点赞成功', 2000)
            return res
          })
        }
      },
      onfocus (key) {
        this.textareaClass = 'on-focus'
      },
      onblur (key) {
        this.textareaClass = ''
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .foot-action .inner .icons-btn-wrap{
    .hasUp-my{
      font-size:14PX;
      margin-right: 17%;
      margin-left: 2%;
    }
    width: 100%;
    justify-content: flex-end;
    .icon .num {
      background:#868686;
    }
  }

  .foot-action {
    .input-wrap {
      width: 100%;
      input {
        font-size:14PX;
        &::placeholder {
          font-size:14PX;
        }
      }
    }
  }
  .title.link-arrow.link {
    border-color:#eeeeee;
    &.active {
      border-color:#0f9ceb;
    }
  }
  .foot-action .inner {
    min-height: 1.2rem;
    //border-bottom: 1px solid #d0d0d0;
    .input-wrap {
      border-radius: 10px;
      display:flex;
      max-width: calc(100vw);
      input, textarea {
        font-family:dang;
        box-sizing: border-box;
        margin: 0;
        margin-right: 100px;
        display: block;
        width: 100%;
        border: none;
        border-radius: 10px;
        line-height: 1.2em;
        font-size: $defaultFontSize;
        padding-top: 9PX;
        height: 30PX;
        &::placeholder {
          font-size: $defaultFontSize;
        }
      }
    }
  }
  .text-btn {
    white-space: nowrap;
    position: absolute;
    width:110px;
    right:0;
    top:0;
    height:100%;
    border-radius:10px;
    background: #ffffff;
    span {
      position: absolute;
      right:0;
      top:50%;
      white-space: nowrap;
      transform:translateY(-50%);
      text-align: center;
      /*padding:10px 30px;*/
      width:100%;
      display:block;
      /*background:#fff;*/
    }
  }
  .input-wrap1{
     min-height: 1.2rem;
   }
  .inner .avatar {
    margin-right: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    background: #ddd;
     >img{
       position: absolute;
       left: 0;
       top: 50%;
       -webkit-transform: translateY(-50%);
       transform: translateY(-50%);
       /* width: 100%; */
       height: 100%;
     }
  }
</style>

